@import "vars"
    
.mkdocs.hint
    @include border(l, 4px solid)
    @include radius
    margin: 1rem 0
    box-shadow: var(--shdw-bold)
    background: var(--bg-card)
    overflow: hidden

    > .title
        @include font(13px, bold)
        display: flex
        justify-content: space-between
        padding: 5px .5rem
        margin: 0
        > span
            flex-grow: 1
        > img
            background: transparent
            width: 20px
            height: 20px
            margin: 0
            &.icon
                margin-right: .5rem
            &.arrow
                @include transition(transform .15s ease)
    
    > summary.title
        &:hover
            cursor: pointer

    > .inner
        @include trim
        @include font(93.75%)
        padding: .7rem 1rem

    &[open]
        > .title
            > img.arrow
                transform: rotate(90deg)

    @each $Type, $color in $hint-color
        &.#{$Type}
            border-color: $color
            > .title
                background: #{$color}1f
            &[open] > .title
                @include border(b, 1px solid #{$color}1f)

    @each $Type, $filter in $hint-filter
        &.#{$Type}
            > .title
                > img.icon
                    filter: $filter

@media (prefers-color-scheme: dark)
    .mkdocs.hint
        > .inner
            background: var(--bg-blk)